<template>
  <div class="classify">
    <div class="top">
      <div class="t-left">{{goodArr.name}}</div>
      <div class="t-right" @click="toClass">查看更多</div>
    </div>
    <div class="c-body">
      <div v-for="(good, key) in goods" :key="key">
        <single-good :good="good" :region = "region"></single-good>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import SingleGood from './singleGood.vue';

  export default {
    components: {SingleGood},
    name: 'classify',

    data () {
      return {
        goods: []
      };
    },
    props: {
      goodArr: {
        type: Object
      },
      region: {
        type: String
      }
    },
    created () {
    },
    methods: {
      compareVal(value) {
        // 按权重排序
        value.sort(function compare(obj1, obj2) {
          let val1 = parseInt(obj1.weight);
          let val2 = parseInt(obj2.weight);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        });
      },
      toClass() {
        this.$router.push(
          {
            name: 'class-good',
            query: {
              region: this.region,
              title: this.goodArr.name
            }
          });
      }
    },
    mounted() {
      let ids = this.goodArr.product.slice(0, 4);
      let goods = {
        type: 'simple',
        ids: ids
      };
      this.$Sale.getListGoods(goods).then(res => {
        this.goods = res.data;
        this.compareVal(this.goods);
      }, () => {
      });
    },
    computed: {},
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .classify
    background-color #fff
    padding-top vw(10)
    position relative
    .top
      display flex
      justify-content space-between
      height vw(30)
      line-height vw(30)
      padding 0 vw(15)
      .t-left
        font-size vw(14)
        color #333
      .t-right
        font-size vw(10)
        color #999
    .c-body
      display flex
      justify-content space-between
      position relative
      flex-wrap wrap
</style>
